<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Yes/No</title>
</head>

<body>
    <h1>Yes/No</h1>
    <div>
        <a href="/">回目录</a>
    </div>
    <hr>
    <div id="app">
        <div>
            <lable>Ask a yes/no question: </lable>
            <input v-model="question">
            <div>{{answer}}</div>
        </div>
    </div>
    <script src="/node_modules/vue/dist/vue.min.js"></script>
    <script src="/node_modules/axios/dist/axios.js"></script>
    <script src="/node_modules/lodash/lodash.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                question: "",
                answer: 'I cannot give you an answer until you ask a question!',
            },
            created: function () {
                // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
                // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
                // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
                // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
                // 请参考：https://lodash.com/docs#debounce
                this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
            },
            methods: {
                getAnswer() {
                    // 停止连续输入
                    if (this.question.indexOf('?') < 0 && this.question.indexOf('？') < 0 ) {
                        // 没有问号
                        this.answer = 'Questions usually contain a question mark. ;-)';
                        return;
                    }

                    // 正在向api发生请求
                    this.answer = 'Thinking...';

                    var vm = this;
                    axios.get("https://yesno.wtf/api")
                        .then(function (response) {
                            vm.answer = _.capitalize(response.data.answer);
                        })
                        .catch(function (error) {
                            vm.answer = "Error! Could not reach th API. " + error;
                        });
                }
            },
            watch: {
                question: function () {
                    this.answer = 'Waiting for you to stop typing...';
                    this.debouncedGetAnswer();
                }
            }
        });
    </script>
</body>

</html>